<template>
  <div class="doc">
    <el-card>
      <el-form @submit.native.prevent="search">
        <el-form-item>
          <el-input
            v-model.trim="key"
            style="width: 50%"
            @keyup.enter="search"
          ></el-input>
        </el-form-item>
      </el-form>

      <comTable
        :data="renderList"
        :labels="['就诊日期', '医生姓名', '诊断结果', '处方信息']"
        :stripe="true"
      >
        <list-column
          :data="renderList"
          label="操作"
          :stripe="true"
        >
          <template slot-scope="scope">
            <el-button
              @click="watch(scope.row)"
              type="text"
              size="mini"
              >详情</el-button
            >
          </template>
        </list-column>
      </comTable>
    </el-card>
    <el-dialog
      title="就诊记录详情"
      :visible.sync="showDetails"
      width="30%"
    >
      <el-descriptions title="">
        <el-descriptions-item label="就诊日期">{{ details.date }}</el-descriptions-item>
        <el-descriptions-item label="医生姓名">{{ details.doctor }}</el-descriptions-item>
        <el-descriptions-item label="诊断结果">{{ details.diagnosis }}</el-descriptions-item>
        <el-descriptions-item label="处方信息">{{ details.prescription }}</el-descriptions-item>
      </el-descriptions>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="showDetails = false"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
    <!--<template #slotName='scoped'></template>-->
  </div>
</template>
<script>
import comTable from '../components/com-table.vue'
import listColumn from '../components/list-column.vue'
export default {
  name: 'ComponentName',
  data() {
    return {
      key: '',
      keyWord: '',
      tableData: [
        {
          date: '2022-01-01',
          doctor: '张三',
          diagnosis: '感冒',
          prescription: '感冒药',
        },
        {
          date: '2022-02-01',
          doctor: '李四',
          diagnosis: '头疼',
          prescription: '止疼药',
        },
        {
          date: '2022-03-01',
          doctor: '王五',
          diagnosis: '腰痛',
          prescription: '止痛贴',
        },
      ],
      details: {},
      showDetails: false,
    }
  },
  computed: {
    renderList() {
      return this.tableData.filter((el) => {
        let flag = false
        for (const key in el) {
          if (el[key] === this.keyWord || !this.keyWord) {
            flag = true
          }
        }
        return flag
      })
    },
  },
  methods: {
    search() {
      this.keyWord = this.key
      this.key = ''
    },
    watch(row) {
      this.showDetails = true
      this.details = { ...row }
    },
  },
  components: { comTable, listColumn },
  filters: {},
  watch: {},
  created() {},
  mounted() {},
  activated() {},
  deactivated() {},
}
</script>
<style lang="less" scoped>
.doc {
  padding: 50px;
  .el-form {
    margin-bottom: 20px;
  }
}
</style>
